<template>
  <div style="width: calc(100% - 40px); padding: 20px">
    <el-row :gutter="20" style="height: 80vh;width: 100%">
      <el-col :span="6">
        <div class="node-container" @mousedown="addNode">节点</div>
      </el-col>
      <el-col :span="18">
        <div id="soldierContainer"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { LogicFlow } from '@logicflow/core';
import '@logicflow/core/lib/style/index.css';
import { v4 as uuidv4 } from 'uuid';
import DemoNode from './logicflowNode/demoNode/index.js';

export default {
  data() {
    return {
      lf: null
    }
  },
  mounted() {
    this.initLF();
  },
  methods: {
    addNode(){
      let uuid = uuidv4();
      let nodeData = {
        nodeName: '111',
        level: 1,
      };
      // 创建新节点
      const node = {
        id: uuid,
        type: 'DemoNode', // 节点类型，可以是 rect, circle, polygon 等
        properties: {
          nodeData
        }
      };
      this.lf.dnd.startDrag(node);
    },
    initLF(){
      this.lf = new LogicFlow({
        container: document.getElementById('soldierContainer'),
        grid: true,
        keyboard: {
          enabled: true
        },
        select: {
          enable: true, // 启用选择功能（包括框选）
          multiple: true, // 允许选中多个元素
          rubberBand: true // 启用橡皮筋框选（按住鼠标拖动绘制选框）
        },
        style: {
          polyline: {
            stroke: '#0099CC',
            strokeWidth: 2,
            strokeDasharray: '5,5'
          }
        }
      });
      this.lf.setTheme({
        anchor: {
          stroke: "#0099CC",
          fill: "#FFFFFF",
          r: 6,
          hover: {
            fill: "#949494",
            fillOpacity: 0.5,
            stroke: "#949494",
            r: 0,
          },
        },
        anchorLine: {
          stroke: "#FF0000",
          strokeWidth: 2,
          strokeDasharray: "3,2",
        },
      });
      this.lf.register(DemoNode);
      this.lf.render();
      this.lf.translateCenter(); // 将图形移动到画布中央
      //点击编辑按钮
      this.lf.on('custom:button-click', data => {
        console.log(data)
      });
    }
  }
};
</script>

<style scoped>
#soldierContainer{
  height: 100%;
  width: 100%;
  border: 1px solid #000;
}
.node-container{
  width: 100%;
  border: 1px solid #000;
  text-align: center;
  cursor: text;
}
</style>
